<template>
  <div id="wrapper"><!-- 登录界面 -->
    <!-- logo -->
    <div id="header"> 
      <!-- <span class="iconfont icon-yun01 login_logo"></span> -->
      <img style="width: 100px;" :src="logo_src" alt="">
      <span class="logo_title">DesCloud</span>
    </div>
    <!-- logo -->
    <!-- form表单 -->    
    <div id="login_title">
      <span>———— 使用手机号/邮箱登录 ————</span>
    </div>
    <div id="content">
      <el-form>
        <el-form-item>
          <el-input size="small" placeholder="输入手机号或邮箱"></el-input>
          <el-input size="small" placeholder="输入密码"></el-input>
          <el-checkbox style=" float:left" size='mini'>记住密码</el-checkbox>  <el-checkbox style=" float:right" size='mini'>自动登录</el-checkbox>
        <!-- </el-form-item>
        <el-form-item size='small'> -->
          <el-button @click="login()" style="width: 100%;background: #1db2e8" type='primary' size='mini'>登 录</el-button>
          <el-button  style="color: #1db2e8; float:left" type="text">忘记密码>></el-button><el-button  style="color: #1db2e8;float:right" type="text">点击注册>></el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- form表单 -->
    <!-- 使用第三方账号登录 -->
    <div id="login_title">
      <span>———— 使用第三方账号登录 ————</span>
    </div>
    <div>
      <span class="iconfont icon-weibo weibo third-party "></span>
      <span class="iconfont icon-weixin weixin third-party "></span>
      <span class="iconfont icon-qq qq third-party "></span>
    </div>
    <!-- 使用第三方账号登录 -->
  </div>
</template>

<script>
  const { ipcRenderer } = require('electron')
  export default {
    name: 'login',
    data () {
      return {
        logo_src: ''
      }
    },
    mounted () {
      // const path = require('path')
      // this.logo_src = path.join(__static, '256x256.png')
      this.logo_src = require('@/assets/logo.png')
    },
    methods: {
      login () {
        ipcRenderer.send('login_change', {w: 960, h: 540, customResizable: true})

        this.$router.push('index')
      }
    }
  }
</script>

<style scoped>
  #wrapper {
    text-align: center;
  }
  #content {
    width: 65%;
    margin: 0 auto;
  }
  #header {
    width: 65%;
    color: #1db2e8;
    margin-top: 15px;
  }
  .head_logo {
    line-height: 0.5em;
    width: 60px;
  }
  .logo_title {
    /* line-height: 1.5em; */
    position: absolute;
    top: 6%;
    font-size: 38px;
  }
  .login_logo {
    line-height: 1.5em;
    font-size: 50px;
  }
  #login_title {
    /* font-size: 30px; */
    color: #aaa;
    font-size: 13px;
    line-height: 2.5em;
  }
  .third-party {
    font-size: 48px;
    margin: 20px;
    line-height: 1.5em;
  }
  .qq {
    color: #1db2e8;
  }
  .weixin {
    color: #54ad23;
  }
  .weibo {
    color: #da1d14;
  }
</style>
